<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">
<div layout:fragment="content">
    <!--header wrapper end-->
    <!--med_tittle_section-->
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a href="index.html">系统首页</a></li>
                                <li><a th:href="@{/route/travelRouteListUI}">路线列表</a></li>
                                <li><a href="#">报名</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- med_tittle_section End -->
    <!--service section start-->
    <input type="hidden" id="routeNode" th:value="${travelRoute.routeNode}">
    <div class="page-container">
        <div class="container">
            <div class="row med_toppadder50 med_bottompadder50">
                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                    <div class="news-detail-box">
                        <h3 th:text="${travelRoute.name}"></h3>
                        <div class="author-info">
                            <span th:text="${#calendars.format(travelRoute.createDate,'yyyy-MM-dd')}"></span>
                            <span>所在地：<span th:text="${travelRoute.address}"></span></span>
                        </div>
                        <div class="news-detail-content">
                            <p th:text="${travelRoute.describe}">
                            <div class="route_name">

                            </div>
                            </p>
                            <div align="right" style="float:right">
                                <button th:if="${flag == false}" th:onclick="cancelTravelRouteReserve([[${travelRoute.id}]],'报名')"
                                        type="button" class="btn btn-default btn-info">报名
                                </button>
                                <button th:if="${flag == true }" disabled="disabled" th:onclick="cancelTravelRouteReserve([[${travelRoute.id}]],'已报名')"
                                        type="button" class="btn btn-default btn-info">
                                    已报名
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <div class="sider-card">
                        <div class="sider-card-header">
                            <h3>热门路线</h3>
                        </div>
                        <ul class="sider-list-model-a">
                            <li th:each="travelRoute:${top10Route}">
                                <a th:href="@{/route/travelRouteDetailsUI(id=${travelRoute.id})}"
                                   th:text="${travelRoute.name}">XXXX</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <div class="modal fade" id="addNodeModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">请选择需要游览的景点</h4>
                    </div>
                    <div class="modal-body">
                        <form method="post" name="addNodeForm"
                              id="addNodeForm" class="form-horizontal">
                            <div class="form-group m-b-10" >
                                <div class="col-sm-12" id="node_name">

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-info" th:onclick="saveNode([[${travelRoute.id}]])">提交</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script th:src="@{/js/jquery_min.js}"></script>
    <!--service section end-->
    <script th:inline="javascript">

        let routeNodeStr = $("#routeNode").val()
        if(routeNodeStr){
            let routeNode = JSON.parse(routeNodeStr)
            let html = ''
            for(let i = 0;i<routeNode.length;i++){
                html+='<p>景点：'+routeNode[i].nodeName + '   价格：'+ routeNode[i].nodePrice +'</p>'
            }
            $(".route_name").append(html)

            let inputHtml = ''
            for(let i = 0;i<routeNode.length;i++){
                inputHtml+='<label for="node'+i+'">'+routeNode[i].nodeName + '（' + routeNode[i].nodePrice  +'元）</label>'
                inputHtml+='<input type="checkbox" name="nodeName" id="node'+i+'" value="'+routeNode[i].nodeName + ',' + routeNode[i].nodePrice  +'" />'
            }
            $('#node_name').append(inputHtml)

        }


        function cancelTravelRouteReserve(id, str) {
            var username = getCookie('username');
            if(!username){
                window.location.href = '/travel/loginUI'
                return
            }
            $('#addNodeModal').modal('show')
        }

        function saveNode(id) {
            var data = $('input:checkbox[name="nodeName"]:checked')
            if(!data || data.length === 0){
                alert('请选择景点')
                return
            }
            let node = ''
            for(let i = 0;i<data.length;i++){
                node += $(data[i]).val() + '-'
            }

            $.ajax({
                url: '/travel/route/join',
                data: {"id": id, nodeName: node},
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code === 200) {
                        confirm("报名成功!"); //在页面上弹出对话框
                        $('#addNodeModal').modal('hide')
                        window.location.reload()
                    } else {
                        layer.open({
                            title: '错误提示',
                            content: result.message
                        });
                    }
                }
            })
        }

        function getCookie(key) {
            var arr1 = document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的，所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型；
            for (var i = 0; i < arr1.length; i++) {
                var arr2 = arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
                if (arr2[0] == key) {
                    return decodeURI(arr2[1]);
                }
            }
        }
    </script>
</div>
</html>
